<!doctype html>
<html lang="zh-CN" data-rem="375">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>搜索</title>
    <link rel="stylesheet" href="/css/style-search.css">
</head>
<body>
<div class="search-wrapper">

    <div class="search-nav">
        <div class="back-arrow" onclick="window.history.go(-1)" ><img src="/img/common/arrow-left.png" alt="" class="back-img"></div>
        <input type="text" class="search-ipt inp ">
        <div class="search-img-wrapper"><img src="/img/common/search-icon-black.png" alt="" class="search-icon"></div>
    </div>
    <div class="history">
        <h1 class="history-title">历史记录</h1>
        <div class="history-list search_history hot_list ">

        </div>
    </div>
</div>
<script crossorigin="anonymous" integrity="sha384-qu2J8HSjv8EaYlbzBdbVeJncuCmfBqnZ4h3UIBZ9WTZ/5Wrqt0/9hofL0046NCkc" src="https://lib.baomitu.com/zepto/1.2.0/zepto.min.js"></script>

<script>
    $(function(){

        $(".search-icon").click(function () {
            var val = $('.inp').val();
            location.href="/project/keyword" + val;
        });

        var search = new Search()
        search.getInp()
        search.getInpData()
        search.creatHistory()
    })
    var Search = function(){}
    Search.prototype = {
        getInpData:function(){

            return JSON.parse(localStorage.getItem('searchArr')||'[]')
        } ,
        getInp: function(){
            $('.inp').on('keypress',function(e){
                var value =$.trim($(this).val())
                if(!value){
                    return;
                }
                if(e.keyCode ==13){
                    Search.prototype.getSearchList(value)
                    Search.prototype.insertTOSearchHistory(value)
                    // $('.history').css({'display': 'none'})
                    location.href="/project/keyword" + value;
                }
            })
        },
        getSearchList: function(key){ // 将搜索记录存在本地
            var list = Search.prototype.getInpData()
            // console.log(list)
            $.each(list,function(i,item){
                if(item==key){
                    // console.log(key,item)
                    list.splice(i,1)
                    return true;
                }
            })
            list.push(key)
            // 记录最多的条数
            if(list.length>20){
                list.splice(0,list.length-20)
            }
            localStorage.setItem('searchArr',JSON.stringify(list))

        },
        insertTOSearchHistory: function(value){ //显示在页面上

        },
        creatHistory: function(){ //初始化加载
            var list = Search.prototype.getInpData()
            if(list.length==0){
                var str = "<div class='history'>"+'暂无搜索记录'+"</div>"
                $('.search_history').append(str)
            }else{
                list = list.reverse();
                list.forEach(item => {
                    var str = '<a href="/project/keyword'+item+'"> <span class="history-item">'+item+'</span></a>';
                    $('.history-list').append(str)
                });
            }
        }
    }
</script>

</body>
</html>